﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>小窝社区</title>
		<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
		<style>
			#editor—wrapper {
				border: 1px solid #ccc;
				z-index: 100; /* 按需定义 */
			}

			#map {
				width: 100%;
				height: 500px;
				position: relative;
			}

			#pImage{
				width: 100%;
				height: auto;
				position: relative;
			}
			#toolbar-container { border-bottom: 1px solid #ccc; }
			#editor-container { height: 500px; }
		</style>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=l4E83VEt28KZ7muQG8j54QB8C2ezXhsz">
		</script>
		<th:block th:replace="~{/frontdesk/resources::common_css}"/>
		<th:block th:replace="~{/frontdesk/resources::common_js}"/>




	</head>
	<body>

	<!-- THE LOADER -->
	
	<div class="be-loader">
	    	<div class="spinner">
				<div class="spinner-container container1">
			    <div class="circle1"></div>
			    <div class="circle2"></div>
			    <div class="circle3"></div>
			    <div class="circle4"></div>
				</div>
			  	<div class="spinner-container container2">
			    <div class="circle1"></div>
			    <div class="circle2"></div>
			    <div class="circle3"></div>
			    <div class="circle4"></div>
			  	</div>
			  	<div class="spinner-container container3">
			    <div class="circle1"></div>
			    <div class="circle2"></div>
			    <div class="circle3"></div>
			    <div class="circle4"></div>
  				</div>
			</div>
	    </div>
	<!-- THE HEADER -->
	<header th:replace="~{/frontdesk/header::header}"></header>


	<!-- MAIN CONTENT -->
	<div id="content-block">
		<div class="container be-detail-container">
			<div class="row">
				<div class="col-xs-12 col-md-4 left-feild">
					<div class="be-user-block style-3">
						<div class="be-user-detail">
							<a class="be-ava-user style-2" href="/frontdesk/blog-detail-2.html">
								<img th:src="${session.member.profilePicture}" alt="">
							<a class="be-ava-left btn color-1 size-2 hover-1" href="/frontdesk/member_edit.html">编辑</a>
							<a class="be-ava-right btn btn-share color-2-0 size-2 hover-10" th:href="@{/frontdesk/member/logout}">登出</a>
							<p class="be-use-name" th:text="${session.member.username}"></p>
							<div class="be-user-info" th:text="${session.member.personalMessage}">
							</div>
<!--							<div class="be-text-tags style-2">-->
<!--								<a href="/frontdesk/blog-detail-2.html">UI/UX</a>,-->
<!--								<a href="/frontdesk/blog-detail-2.html">Web Design</a>,-->
<!--								<a href="/frontdesk/blog-detail-2.html">Art Direction</a>-->
<!--							</div>-->

<!--							<a class="be-user-site" href="/frontdesk/http://www.phoenix.cool"><i class="fa fa-link"></i> www.phoenix.cool</a>-->
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-md-8">
					<div class="tab-wrapper style-1">
						<div class="tab-nav-wrapper">
							<div  class="nav-tab  clearfix">
								<div class="nav-tab-item active">
									<span>我的帖子</span>
								</div>
								<div class="nav-tab-item ">
									<span>发表帖子</span>
								</div>



							</div>
						</div>
						<div class="tabs-content clearfix">
							<div class="tab-info active">
								<div class="row">
									<div class="col-ml-12 col-xs-6 col-sm-4" th:each="post:${postPage.records}">
										<div class="be-post">
											<a th:href="@{/frontdesk/post/postDesc(pid=${post.pid})}" class="be-img-block">
												<img th:src="${post.postImage}" alt="omg">
											</a>
											<a th:href="@{/frontdesk/post/postDesc(pid=${post.pid})}" class="be-post-title" th:text="${post.postTitle}"></a>

									 		<div class="author-post">
												<img th:src="${post.member.profilePicture}" alt="" class="ava-author">
												<span>by <a  th:text="${post.member.username}"></a></span>
											</div>
<!--											<div class="info-block">-->
<!--												<span><i class="fa fa-thumbs-o-up"></i> 360</span>-->
<!--												<span><i class="fa fa-eye"></i> 789</span>-->
<!--												<span><i class="fa fa-comment-o"></i> 20</span>-->
<!--											</div>-->
										</div>
									</div>
								</div>
							</div>
							<div class="tab-info">
								<div class="row">
									<div class="col-xs-12 col-md-4 left-feild">
										<div class="clearfix"></div>
										<div class="form-label">帖子封面</div>
										<a class="be-ava-user style-2">
											<img id="pImage" alt="">
										</a>

										<!--                           提交图片必须加上enctype="multipart/form-data"这个属性-->
										<form class="btn color-4 size-2 hover-7" id="uploadPImage" enctype="multipart/form-data">
											<input  type="file"  name="file" id="pImageFile">
										</form>


										<script th:inline="javascript">
											$(function (){
												$("#pImageFile").change(function (){
													// 异步提交表单
													$("#uploadPImage").ajaxSubmit({
														url:"/frontdesk/post/upload",
														type: "post",
														success:function (result){
															// 上传成功后，图片回显到pImage上
															$("#pImage").attr("src",result.data[0]);
															//上传成功后，图片地址放入产品表单的隐藏域中
															$("#postImageFile").val(result.data[0]);
														}
													})
												})
											})
										</script>

										<form th:action="@{/frontdesk/post/add}" method="post">
											<div class="clearfix"></div>
											<input type="submit" class="btn color-2 size-1 hover-7" value="点击发表">

											<div class="form-group">
												<input class="form-input" name="postTitle" type="text" placeholder="标题">
											</div>
											<div class="clearfix"></div>
											<div class="be-custom-select-block">
												<select class="be-custom-select" name="cid">
													<option value="" disabled selected>
														版块
													</option>
													<option value="18">生活趣事</option>
													<option value="19">社区建议与投诉</option>
												</select>
											</div>


											<div class="clearfix"></div>

											<div class="clearfix"></div>
											<textarea id="text1" name="postDesc" hidden></textarea>
											<input type="text" hidden name="mid" th:value="${session.member.mid}">
											<input id="postImageFile" type="text" hidden name="postImage">
											<input type="text" hidden name="status" th:value="1">


										</form>


									</div>
								</div>
								<div class="row" >
									<div id="editor—wrapper">
										<div id="toolbar-container"><!-- 工具栏 --></div>
										<div id="editor-container"><!-- 编辑器 --></div>
									</div>
									<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
									<script>
										const { createEditor, createToolbar } = window.wangEditor

										const editorConfig = {
											placeholder: 'Type here...',
											onChange(editor) {
												const html = editor.getHtml()
												console.log('editor content', html)
												// 也可以同步到 <textarea>
												const $text1 = $('#text1')
												// 监控变化，同步更新到 textarea
												$text1.val(html)
											}
										}

										const editor = createEditor({
											selector: '#editor-container',
											html: '<p><br></p>',
											config: editorConfig,
											mode: 'default', // or 'simple'
										})

										const toolbarConfig = {}

										const toolbar = createToolbar({
											editor,
											selector: '#toolbar-container',
											config: toolbarConfig,
											mode: 'default', // or 'simple'
										})
									</script>

								</div>

							</div>


						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- THE FOOTER -->
	<footer th:replace="~{/frontdesk/footer::footer}"></footer>

	<div class="be-fixed-filter"></div>



	</body>
</html>